<script setup lang="ts">
import {useRouter} from 'vue-router'
const router = useRouter()
</script>

<template>
  <div class="box">
    <div class="top">
      <span @click="router.back(-1)" style="margin-left: 0.4rem;"><</span>
      <span style="margin-left: 2.2rem;">问题反馈类型</span>
    </div>
    <ul>
      <li class="active">功能异常</li>
      <li>优化建议</li>
      <li>其他反馈</li>
    </ul>
    <div class="ly">
      <van-cell-group :autosize="{ maxHeight: 200, minHeight: 100 }" inset>
        <van-field
          style="width: 100%; height: 160px"
          v-model="message"
          rows="2"
          autosize
          type="textarea"
          maxlength="500"
          placeholder="请输入您想反馈的内容…"
          show-word-limit
        />
      </van-cell-group>
    </div>

    <div class="tj">
      <div>添加图片<span>（选填，最多4张）</span></div>
      <img src="./3.png" alt="" />
    </div>
    <!-- 底部 -->
    <div class="footer">
      <van-button style="width: 95%; margin-left: 2.5%" type="primary" size="large"
        >提问</van-button
      >
    </div>
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  font-size: 0.35rem;
  background-color: #f5f5f5;

  .top {
    width: 100%;
    height: 50px;
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    line-height: 50px;
    background-color: #fff;
  }

  ul {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;

    li {
      width: 30%;
      height: 35px;
      background-color: #dfdfdf;
      text-align: center;
      border-radius: 5px;
      line-height: 35px;
    }
    .active {
      border: 1px solid #0077ff;
      color: #0077ff;
      background-color: #dfeeff;
    }
  }

  .ly {
    width: 100%;
    height: 200px;
    background-color: #fff;
    margin-top: 10px;
    border-bottom: 1px solid #dfdfdf;
  }
  element.style {
    height: 160px;
  }

  .tj {
    width: 100%;
    height: 150px;
    background-color: #fff;
    padding: 10px;

    span {
      font-size: 0.25rem;
      color: #a8a8a8;
    }

    img {
      width: 100px;
      height: 100px;
      margin-top: 10px;
    }
  }
  //底部
  .footer {
    width: 100%;
    height: 70px;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 10px 0;
  }
}
</style>
